<template>
  <div class="interface">
    <div class="content">
      <div class="inner" id="chart-container"></div>
    </div>
    <ul class="sleep-list">
      <li class="sleep-item">
        <img src="../assets/images/interface1.png" alt="img" class="icon" />
        <div class="text">
          <div class="one">睡眠总时长</div>
          <div class="two">
            <span class="num">{{ hours }}</span
            >小时 <span class="num">{{ minutes }}</span
            >分钟
          </div>
        </div>
      </li>
      <li class="sleep-item">
        <img src="../assets/images/interface2.png" alt="img" class="icon" />
        <div class="text">
          <div class="one">睡眠时间</div>
          <div class="two">
            <span>{{ content.gobed_time }}</span
            >~
            <span>{{ content.outbed_time }}</span>
          </div>
        </div>
      </li>
    </ul>
    <!-- 各项睡眠监测数据统计 -->
    <div class="data-content">
      <div class="title-text">各项睡眠监测数据统计</div>
      <ul class="item-list">
        <!-- 上床时间 -->
        <li class="item">
          <div class="title-icon">
            <span class="img-icon"></span>
            <span>上床时间</span>
          </div>
          <div class="num-text">{{ content.gobed_time }}</div>
        </li>
        <!-- 在床时间 -->
        <li class="item">
          <div class="title-icon">
            <span class="img-icon"></span>
            <span>离床时间</span>
          </div>
          <div class="two">
            <div class="num-text">{{ content.outbed_time }}</div>
          </div>
        </li>
        <!-- 深睡时间 -->
        <li class="item">
          <div class="title-icon">
            <span class="img-icon" style="background-color: #185bdf"></span>
            <span>深睡时间</span>
          </div>
          <div class="two">
            <span class="num">8</span>小时 <span class="num">55</span>分钟
          </div>
        </li>

        <!-- 睡眠效率 -->
        <li class="item">
          <div class="title-icon">
            <span class="img-icon" style="background-color: #185bdf"></span>
            <span>浅睡时长</span>
          </div>
          <div class="num-text">
            <span class="num">8</span>小时 <span class="num">55</span>分钟
          </div>
        </li>
        <!-- 平均呼吸率 -->
        <li class="item">
          <div class="title-icon">
            <span class="img-icon"></span>
            <span>平均呼吸率</span>
          </div>
          <div class="num-text">
            <span class="num">{{ content.avg_hx.value }}次/分</span>
          </div>
        </li>
        <!-- 平均心率 -->
        <li class="item">
          <div class="title-icon">
            <span class="img-icon"></span>
            <span>平均心率</span>
          </div>
          <div class="num-text">
            <span class="num">{{ content.avg_rh.value }}次/分</span>
          </div>
        </li>
      </ul>
      <!-- 其他信息 -->
      <div class="other-content">
        <div class="tip">
          <div class="title-text">睡眠质量</div>
          <div class="text">{{ content.sleep_eff.desc }}</div>
        </div>
        <ul class="data">
          <!-- 体动指数 -->
          <li class="data-item">
            <span class="text">体动指数</span>
            <span class="value">
              <span class="num">{{ content.move_count.value }}</span
              >次
            </span>
          </li>
          <!-- 离床次数 -->
          <li class="data-item">
            <span class="text">离床次数</span>
            <span class="value">
              <span class="num">{{ content.outbed_count.value }}</span
              >次
            </span>
          </li>
          <!-- 打鼾次数 -->
          <li class="data-item">
            <span class="text">打鼾次数</span>
            <span class="value">
              <span class="num">{{ content.snoring_count.value }}</span
              >次
            </span>
          </li>
        </ul>
      </div>
      <!-- 睡眠效率 -->
      <div class="other-line" >
        <span class="text-content">
          <span class="text">睡眠效率</span>
          <!-- <img src="../assets/images/wenhao.png" alt="icon" class="icon" /> -->
        </span>
        <span class="value">{{ content.sleep_eff.value }}</span>
      </div>
      <!-- 安稳度 -->
      <div class="other-line" style="margin-bottom: 50px;">
        <span class="text-content">
          <span class="text">睡眠得分</span>
          <!-- <img src="../assets/images/wenhao.png" alt="icon" class="icon" /> -->
        </span>
        <span class="time">
        
          <span class="num">{{info.score}}</span>
          <span style="color:#ffffff"> 分</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { Report } from "../api/users";
export default {
  data() {
    return {
      selecterShow: false,
      info: {},
      content: {
        avg_hx: {},
        avg_rh: {},
        move_count: {},
        outbed_count: {},
        snoring_count: {},
        sleep_eff: {},
      },
      hours: 0,
      minutes: 0,
      chart: "",
    };
  },
  components: {
    // LineChart
  },
  methods: {
    change() {
      this.selecterShow = !this.selecterShow;
    },
    async getReport() {
      var token = localStorage.getItem("token");
      var obj = await Report({ token: token });
      if (obj.status == 200) {
        this.info = obj.data;
        var content = JSON.parse(obj.data.content);
        this.content = content;

        var totalMinutes = content.total_duration;

        const hours = Math.floor(totalMinutes / 60); // 计算小时数
        const minutes = totalMinutes % 60; // 计算剩余分钟

        this.hours = hours;
        this.minutes = minutes;

        this.chart.setOption({
          series: [
            {
              type: "gauge",
              title: {
                textStyle: {
                  color: "white", // 这里设置标题文字颜色为白色
                },
              },
              detail: { show: false },
              data: [{ value: obj.data.score, name: "香睡指数" }],
              axisTick: { show: false },
              axisLabel: {
                show: false,
                color: "white",
              },
              axisLine: {
                lineStyle: {
                  color: [
                    [obj.data.score / 100, "#e846f6"], // 渐变色起始值
                    [1, "#125adf"], // 渐变色结束值
                  ],
                  width: 20, // 仪表盘的宽度
                },
              },
            },
          ],
        });
      }
    },
  },
  created() {
    this.getReport();
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById("chart-container"));
    // 绘制仪表盘
  },
};
</script>

<style lang="scss" scoped>
.interface {
  width: 750px;

  background-color: #030542;
  padding-bottom: 30px;

  .content {
    width: 486px;
    height: 486px;
    border-radius: 50%;
    background-color: #05114d;
    margin: 0px auto;
    display: flex;
    justify-content: center;
    align-items: center;

    .inner {
      width: 423px;
      height: 423px;
      border-radius: 50%;
      background-color: #061955;
    }
  }

  .sleep-list {
    display: flex;
    align-items: center;
    width: 690px;
    align-items: center;
    margin: 0 auto;
    justify-content: space-between;

    .sleep-item {
      display: flex;
      align-items: center;

      .text {
        margin-left: 30px;

        color: #fff;
        font-size: 20px;

        .num {
          font-size: 40px;
          font-weight: bold;
        }
      }

      .icon {
        width: 75px;
        height: 75px;
        border-radius: 50%;
      }
    }
  }

  .data-content {
    width: 690px;
    margin: 20px auto;

    .title-text {
      color: #fff;
      font-weight: bold;
      font-size: 38px;
    }

    .item-list {
      margin-top: 30px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .item {
        display: flex;
        background-color: #8520b4;
        width: 320px;
        height: 100px;
        border-radius: 16px;
        flex-direction: column;
        align-items: center;
        margin-bottom: 30px;

        justify-content: center;

        .title-icon {
          color: #dcdcdc;
          font-weight: bold;
          font-size: 30px;
          display: flex;
          align-items: center;

          .img-icon {
            width: 26px;
            height: 26px;
            margin-right: 20px;
            border-radius: 50%;
            background-color: #c62192;
            border: 2px solid #fff;
          }
        }

        .num-text {
          font-weight: bold;
          margin-top: 15px;
          font-size: 14px;
          color: #fff;
        }

        .two {
          color: #fff;
          margin-top: 10px;
          font-size: 12px;

          .num {
            font-size: 22px;
            font-weight: bold;
          }
        }
      }
    }

    .other-content {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .tip {
        width: 315px;
        height: 195px;
        border-radius: 30px;
        background-image: linear-gradient(to top right, #6b14d0, #c72091);
        color: #fff;

        .title-text {
          color: #fff;
          font-size: 20px;
          line-height: 60px;
          padding-left: 30px;
          font-weight: bold;
        }

        .text {
          font-size: 26px;
          font-weight: bold;
          padding: 0 20px;
          box-sizing: border-box;
        }
      }

      .data {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 195px;

        .data-item {
          width: 315px;
          height: 52px;
          background-color: #8520b4;
          color: #fff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
          box-sizing: border-box;

          .text {
            font-size: 26px;
            color: #fff;
            font-weight: bold;
          }

          .value {
            color: #b5b5b5;
            font-size: 15px;

            .num {
              color: #fff;
              font-size: 20px;
              font-weight: bold;
              margin-right: 5px;
            }
          }
        }
      }
    }

    .other-line {
      width: 690px;
      height: 75px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      background-color: #8520b4;
      color: #fff;
      margin-top: 20px;
      justify-content: space-between;
      box-sizing: border-box;

      .text-content {
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 20px;
        font-weight: bold;

        .text {
          width: 130px;
        }

        .icon {
          width: 21px;
          height: 21px;
          margin-left: 20px;
        }
      }

      .value {
        font-size: 20px;
        font-weight: bold;
      }

      .time {
        color: #b5b5b5;
        font-size: 12px;
        font-weight: bold;

        .num {
          color: #fff;
          font-size: 20px;
          font-weight: bold;
          margin-left: 20px;
        }
      }
    }
  }
}
</style>